<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<rich:panel header="#{messages['confirm.payment']}">
		<h:panelGrid>
			<h:outputText value="#{errorBean.errorMessage}" styleClass="error"></h:outputText>
		</h:panelGrid>
		
		<t:panelGrid columns="2" columnClasses="standardTable_ColumnLeft_20,standardTable_ColumnLeft_80" width="100%">
			
			<h:outputText></h:outputText>
				<t:message for="paymentMethod" styleClass="error"></t:message>

				<h:panelGroup>
					<h:outputLabel for="paymentMethod" value="#{messages['payment.method']}"
						styleClass="standardText_Label" />
				</h:panelGroup>
				<h:panelGroup>
					<t:selectOneMenu id="paymentMethod" styleClass="standardText"
						value="#{agentProspectPaymentBean.paymentMethod}">
						<f:selectItem itemLabel="#{messages['please.select']}"
							itemValue="" />
						<f:selectItems value="#{agentProspectPaymentBean.paymentMethodList}" />
						<a4j:support event="onclick" reRender="table" ajaxSingle="true"></a4j:support>
					</t:selectOneMenu>
				</h:panelGroup>
		</t:panelGrid>
		
		<t:panelGrid columns="2" columnClasses="standardTable_ColumnLeft_20,standardTable_ColumnLeft_80" width="100%">
			<h:outputLabel for="product" value="#{messages['product.name']}" styleClass="standardText_Label" />
			<h:outputText id="product" value="#{agentProspectPaymentBean.membership.desc}"></h:outputText>
			
			<h:outputLabel for="amount" value="#{messages['amount']}" styleClass="standardText_Label" />
			<h:outputText id="amount" value="#{agentProspectPaymentBean.payAmt}">
				<f:convertNumber pattern="#,###,###,##0.00"/>
			</h:outputText>
		</t:panelGrid>
		
		<t:panelGrid width="100%" id="table">
		
		<t:panelGrid id="check" rendered="#{agentProspectPaymentBean.checkFlag}" columns="2" columnClasses="standardTable_ColumnLeft_20,standardTable_ColumnLeft_80" width="100%">
			<h:outputText></h:outputText>
			<t:message for="chequeno" styleClass="error"></t:message>
			
			<h:panelGroup>
				<h:outputText value="*" styleClass="standardText_Mandatory" />
				<h:outputLabel for="chequeno" value="#{messages['cheque.no']}" styleClass="standardText_Label" />
			</h:panelGroup>
			<h:inputText id="chequeno"  required="true" value="#{agentProspectPaymentBean.chequeno}"></h:inputText>
		</t:panelGrid>
		
		<t:panelGrid id="creditcard" rendered="#{agentProspectPaymentBean.creditCardFlag}" columns="2" columnClasses="standardTable_ColumnLeft_20,standardTable_ColumnLeft_80" width="100%">	
			<h:outputText></h:outputText>
			<t:message for="name" styleClass="error"></t:message>
			<h:panelGroup>
				<h:outputText value="*" styleClass="standardText_Mandatory" />
				<h:outputLabel for="name" value="#{messages['credit.card.holder.name']}" styleClass="standardText_Label" />
			</h:panelGroup>
			<h:inputText id="name"  required="true" value="#{agentProspectPaymentBean.instruction.name}"></h:inputText>
			<h:panelGroup>
				<h:outputText value="*" styleClass="standardText_Mandatory" />
				<h:outputLabel value="#{messages['credit.card.no']}" styleClass="standardText_Label" />
			</h:panelGroup>
			<h:panelGroup>
				<t:panelGrid columns="4">
					<t:message for="no1" styleClass="error"></t:message>
					<t:message for="no2" styleClass="error"></t:message>
					<t:message for="no3" styleClass="error"></t:message>
					<t:message for="no4" styleClass="error"></t:message>
				
					<h:inputText id="no1" maxlength="4" size="4" required="true" value="#{agentProspectPaymentBean.instruction.cardNo1}"></h:inputText>
					<h:inputText id="no2" maxlength="4" size="4" required="true" value="#{agentProspectPaymentBean.instruction.cardNo2}"></h:inputText>
					<h:inputText id="no3" maxlength="4" size="4" required="true" value="#{agentProspectPaymentBean.instruction.cardNo3}"></h:inputText>
					<h:inputText id="no4" maxlength="4" size="4" required="true" value="#{agentProspectPaymentBean.instruction.cardNo4}"></h:inputText>
				</t:panelGrid>
			</h:panelGroup>
			
			<h:outputText></h:outputText>
			<t:message for="cvc" styleClass="error"></t:message>
			
			<h:panelGroup>
				<h:outputText value="*" styleClass="standardText_Mandatory" />
				<h:outputLabel for="cvc" value="#{messages['credit.card.cvc']}" styleClass="standardText_Label" />
			</h:panelGroup>
			<h:inputText id="cvc"  required="true" value="#{agentProspectPaymentBean.instruction.cvcNo}"></h:inputText>
			
			<h:outputText></h:outputText>
			<t:message for="type" styleClass="error"></t:message>
			
			<h:panelGroup>
				<h:outputText value="*" styleClass="standardText_Mandatory" />
				<h:outputLabel for="type" value="#{messages['credit.card.type']}" styleClass="standardText_Label" />
			</h:panelGroup>
			<h:inputText id="type"  required="true" value="#{agentProspectPaymentBean.instruction.cardType}"></h:inputText>
			
			<h:outputText></h:outputText>
			<t:message for="effectivedate" styleClass="error"></t:message>
			
			 <h:panelGroup>
		    	<h:outputText value="*" styleClass="standardText_Mandatory" />	
			    <h:outputLabel for="effectivedate" value="#{messages['expiry.date']}" styleClass="standardText_Label" />
    		</h:panelGroup>
		    <h:panelGroup>
		    	<t:inputCalendar
		    	id="effectivedate"
					monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader" 
					currentDayCellClass="currentDayCell" value="#{agentProspectPaymentBean.instruction.expDate}"
					renderAsPopup="true" popupTodayString="#{messages['popup.today']}"
					popupWeekString="#{messages['popup.week']}" popupDateFormat="dd/MM/yyyy"
					renderPopupButtonAsImage="true"
					styleClass="standardText" required="true">
		    </t:inputCalendar>
    </h:panelGroup>
			
		</t:panelGrid>
	</t:panelGrid>
	<rich:spacer height="30"></rich:spacer>
	<t:panelGrid columns="2">
		<t:commandButton styleClass="button" action="#{agentProspectPaymentBean.confirmPaymentAction}" value="#{messages['confirm']}"></t:commandButton>
		<t:commandButton styleClass="button" action="" value="#{messages['cancel']}" immediate="true"></t:commandButton>
	</t:panelGrid>
</rich:panel>